import * as echarts from 'echarts';
import React, { useEffect, useState } from 'react';
import styles from './index.less';
import history from '../../../../assets/history.png';
import Calendar from './Calendar';
import request from 'umi-request';
import moment from 'moment'


export default function Chart() {


    const [chartData, setChartData] = useState([
        /*   {
              timeStamp: 1692057600000000000,
              txNum: 1
          } */
    ]);

    // useEffect(() => {

    //     fetchChartData(currentDate, sevenDaysAgo);
    // }, []);

    const fetchChartData = async (currentDate, sevenDaysAgo) => {

        /*         const currentDateTimestamp = new Date(currentDate).getTime() * 1e6;
                const sevenDaysAgoTimestamp = new Date(sevenDaysAgo).getTime() * 1e6;
         */

        const currentDateTimestamp = new Date(currentDate).getTime() / 1000 * 1e3;
        const sevenDaysAgoTimestamp = new Date(sevenDaysAgo).getTime() / 1000 * 1e3;

        try {
            const response = await request.post('/api/txhistory2', {
                data: {
                    endTime: sevenDaysAgoTimestamp,
                    startTime: currentDateTimestamp
                }
            });
            setChartData(response.data.list);
        } catch (error) {
            console.error(error);
        }
    };


    useEffect(() => {
        const chart = echarts.init(document.getElementById('chart'));

        const option = {
            grid: {
                top: 15,
                left: 15,
                right: 5,
                bottom: 3,
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                data:// chartData.map(item => moment(item.timeStamp /* / 1000000 */).format('M.D')),
                    chartData.map(item => moment(item.timeStamp, 'x').format('M.D'))
            },
            yAxis: {
                type: 'value',
                interval: 0.2,
                min: 0,
                max: 1,
            },
            series: [
                {
                    data: chartData.map((item) => item.txNum),
                    type: 'line',
                    smooth: true,
                },
            ],
        };

        chart.setOption(option);

    }, [chartData]);



    return (
        <div className={styles.chartWrapper}>
            <div className={styles.tradeTime}>
                <img src={history}></img>
                <span className="overstriking">交易历史</span>
                <div className={styles.timeChoose}>近7天</div>
                <Calendar fetchChartData={fetchChartData} ></Calendar>
            </div>
            <div id="chart" className={styles.lineChart}></div>
        </div>
    );
}
